<template>
  <div ref="chart" class="chart" />
</template>
<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'
// 引入柱状图图表，图表后缀都为 Chart
import { GaugeChart } from 'echarts/charts'
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components'
  // 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'
import BigNumber from 'bignumber.js'

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  GaugeChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
])

export default {
  name: 'SaleChart',
  props: {},
  mounted() {},
  methods: {
    initChart(data) {
      // 接下来的使用就跟之前一样，初始化图表，设置配置项
      var myChart = echarts.init(this.$refs.chart)
      myChart.setOption({
        title: {
          text: data.title,
          x: 'center',
          textStyle: {
            color: '#333333',
            fontSize: 14,
            fontWeight: 'normal'
          }
        },
        series: [
          {
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            center: ['50%', '70%'],
            radius: '110%',
            min: 0,
            max: data.target || 0,
            splitNumber: data.target && data.target > 0 ? 10 : 1,
            axisLine: {
              lineStyle: {
                width: 30,
                color: [
                  [0.6, '#fe5208'],
                  [0.8, '#1584ff'],
                  [1, '#00ca7b']
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              distance: 0,
              length: 0,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 0,
              lineStyle: {
                color: '#fff',
                width: 3
              }
            },
            axisLabel: {
              color: 'auto',
              distance: 40,
              fontSize: 10,
              formatter: function(value, p) {
                if (value === 0) {
                  return 0
                }
                console.log('value', value, data.target)
                if (BigNumber(data.target).multipliedBy(0.6).eq(value)) {
                  return BigNumber(value).toFixed(2) + '万'
                }
                if (BigNumber(data.target).multipliedBy(0.8).eq(value)) {
                  return BigNumber(value).toFixed(2) + '万'
                }
                if (BigNumber(data.target).eq(value)) {
                  return BigNumber(value).toFixed(2) + '万'
                }
                return ''

                // return value + 'km/h'
              }
            },
            detail: {
              valueAnimation: true,
              formatter: '{value} 万元',
              color: 'auto',
              fontSize: 18
            },
            data: [
              {
                value: data.value || 0
              }
            ]
          }
        ]
      })
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .chart {
    height: 300px;
  }
</style>
